<template>
  <div class="page-main" v-title data-title="技术库">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container" ref="imageWrapper">
      <div class="head-content">
        <span class="bold-font">工程技术库引用申请</span>
        <div class="btn-line">
          <a-button
            v-if="!!editAble || checkCurrentTask(['submit'])"
            @click="handleSave('save')"
            class="hte-btn add-btn"
            type="primary"
          >
            保存
          </a-button>
          <a-button v-if="[0,3].indexOf(quote.status) > -1" @click="handleSubmit('quote')" class="hte-btn add-btn">
            提交
          </a-button>
        </div>
      </div>
      <div class="content">
        <a-form-model ref="ruleForm" :rules="rules" :model="quote" :label-col="labelCol" :wrapper-col="wrapperCol">
          <section>
            <div class="section-header">
              <div style="float: left">
                基本信息
                <div class="mouldTips">
                  <img src="@/assets/icon_warning2.png" style="display: inline-block; margin-top: -3px" />
                </div>
              </div>
            </div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="申请单号" ref="approvalNo" prop="approvalNo">
                  <a-input v-model="quote.approvalNo" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请人/部门">
                  <a-input
                    :value="
                      (quote.userName ? quote.userName : '') +
                      '/' +
                      (quote.quoteDepteName ? quote.quoteDepteName : '')
                    "
                    disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间">
                  <a-input :value="quote.createTime" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="技术编号：">
                  <a-input disabled :value="tech.techNo" />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="技术名称：">
                  <a-input :value="tech.techName" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="申请理由" ref="approvalReason" prop="approvalReason">
                  <a-textarea
                    :auto-size="{ minRows: 3, maxRows: 6 }"
                    v-model="quote.approvalReason"
                    :maxLength="500"
                    :disabled="!editAble"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
        </a-form-model>
        <section v-if="quote.processInstanceId">
          <div class="section-header">审核信息</div>
          <ht-approval
            ref="childrenRef"
            :process-instance-id="quote.processInstanceId"
            :custom="custom"
            :options="options"
            @submit="afterSubmit"
            @reject="afterReject"
            @back="backAction"
            @cancelSubmit="afterCancelSubmit"
            :before-fill-opinion="saveNotifyOpinion"
            :before-submit="beforeSubmit"
            :before-reject="beforeReject"
            :show-task-history="true"
            :history-dialog="historyDialog"
            :task-load="taskLoad"
            :message-id="messageId"
            :showPrintBtn="showPrintBtn"
            :show-upload-btn="false"
            :hidden-task-def-key="hiddenTaskDefKey"
            :snapshotConfigs="snapshotConfigs"
            :print="print"
          >
          </ht-approval>
        </section>
      </div>
    </div>
    <ProcessUserSelect ref="ProcessUserSelect" @selectUserConfirm="selectUserConfirm" />
  </div>
</template>
<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { strNotNull, getParamValFromUrl } from '@/utils/common.js'
import { getAction, postAction } from '@/api/manage'
import { Modal } from 'ant-design-vue'
import '@/config/upload.install.js'
import { FlowMixin } from '@/mixins/FlowMixin'
import { CodesMixin } from '@/mixins/CodesMixin'
import FixedMenu from '@/components/tools/FixedMenu'
export default {
  mixins: [FlowMixin, CodesMixin],
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    htApproval: () => import('@/config/ht-approval.umd.min.js'),
    ProcessUserSelect: () => import('@/components/tools/ProcessUserSelect'),

    FixedMenu,
  },
  data() {
    return {
      currentUserId: Vue.ls.get(USER_INFO).username,
      rules: {
        approvalReason: [
          {
            required: true,
            message: '请选择技术类别',
            trigger: 'blur',
          },
        ],
      },
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'Quote',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },

      urls: {
        techInfo: '/hteEngineeTechLib/info',
        save: '/hteEngineeTechLibApproval/edit',
        quoteInfo: '/hteEngineeTechLibApproval/info',
        flowNode: '/hteEngineeTechLibApproval/flowNode',
        startFlow: '/hteEngineeTechLibApproval/startFlow',
      },
      tech: {},
      quote: {},
    }
  },
  computed: {
    editAble() {
      if (
        !this.quote ||
        !this.quote.status ||
        [0, 3].indexOf(this.quote.status) > -1 ||
        this.currentTask.taskDefKey == 'submit'
      ) {
        return true
      }
      return false
    },
  },
  mounted() {
    this.fetchCodes(['工程技术库审批状态'])
    this.quote.id = getParamValFromUrl('id')
    this.tech.id = getParamValFromUrl('techId')
    this.quote.techId = this.tech.id
    this.initData()
  },
  methods: {
    async initData() {
      await this.quoteInfo()
      await this.techInfo()
    },
    async quoteInfo() {
      if (strNotNull(this.quote.id)) {
        let res = await getAction(this.urls.quoteInfo, { id: this.quote.id })
        if (res.success) {
          this.quote = res.result
          this.tech.id = this.quote.techId
        } else {
          this.$message('加载引用审批信息失败')
        }
      }
    },
    async techInfo() {
      if (strNotNull(this.tech.id)) {
        let res = await getAction(this.urls.techInfo, { id: this.tech.id })
        if (res.success) {
          this.tech = res.result
        } else {
          this.$message.warning('加载信息失败，请刷新页面:', res.message)
        }
      }
    },
    async handleSave(type) {
      if (strNotNull(this.quote.techId)) {
        let res = await postAction(this.urls.save, this.quote)
        if (res.success) {
          this.$message.success('操作成功', 5)
          if(this.quote.id){
            this.initData()
          }else{
            this.quote = res.result
            this.$router.push("/engineeTech/quote?id="+this.quote.id)
          }
          
          
        } else {
          this.$message.warning('操作数据出错:' + res.message)
        }
      }
    },
    async handleSubmit() {
      let valid = await this.$refs.ruleForm.validate()
      if (valid) {
        await this.handleSave()
        this.openUserSelector()
      }
    },
    openUserSelector() {
      getAction(this.urls.flowNode + '?id=' + this.tech.id).then((res) => {
        if (res.success) {
          this.$refs.ProcessUserSelect.doSelect(res.result, '')
        } else {
          this.$message.error('获取流程节点信息失败:' + res.message)
        }
      })
    },
    selectUserConfirm(cols) {
      if (this.currentTask.taskDefKey == 'submit') {
        cols.forEach((c) => {
          if (c.value && c.value != null) {
            this.$set(this.custom, c.node, c.value)
          } else {
            this.$set(this.custom, c.node, '')
          }
        })
        this.$refs.childrenRef.custom = this.custom
        this.$refs.childrenRef.submitTaskNotBefore()
        return
      }
      if (cols && cols.length > 0) {
        postAction(this.urls.startFlow + '?id=' + this.quote.id, cols).then((res) => {
          if (res.success) {
            this.$message.success('提交审批成功')
            this.initData()
          } else {
            this.$message.error('提交审批失败:' + res.message)
          }
        })
      }
    },

    handleDele() {
      let that = this
      if ([1, 2].indexOf(this.quote.status) > -1) {
        this.$message.warning('审批中的或审批完成的不允许删除')
        return
      }
      Modal.confirm({
        title: '确认删除',
        content: '此操作将删除当前技术库?',
        onOk: function () {
          getAction(that.urls.delete, { id: that.tech.id }).then((res) => {
            if (res.success) {
              that.$message.success('操作成功')
              window.close()
            } else {
              that.$message.warning('操作失败:', res.message)
            }
          })
        },
      })
    },
    beforeSubmit(res) {
      if (this.currentTask.taskDefKey == 'submit') {
        this.handleSubmit()
        return false
      }
      return true
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.fixed-menu {
  position: fixed;
  right: 20px;
  z-index: 1;
  width: 80px;
  top: 172px;
}

.functionMould {
  background-color: #ffffff;
  padding: 10px;
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  cursor: pointer;
  &:hover {
    > span,
    > i {
      color: #146595;
    }
  }
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
/deep/ .ant-form .ant-form-item:not(.self-form-item) .ant-form-item-label {
  width: 120px;
}

.mouldTips {
  border-radius: 5px;
  padding-left: 15px;
  font-size: 14px;
  font-weight: normal;
  color: #085082;
  line-height: 22px;
  display: inline-block;
}

.page-main {
  .container {
    .content {
      margin-top: 20px;

      section {
        .section-table {
          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  .tips-box {
    margin-top: 32px;

    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}

.icon-file {
  background-image: url('~@assets/file.png');
}

.cr-content-pop {
  p {
    margin-bottom: 15px;
    color: #666;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
<style lang="less" scoped>
/deep/ #process-container {
  width: unset !important;
}

#process-container {
  background: #fff;
  padding: 40px 22px;
  width: auto;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  justify-content: flex-end;
}
</style>
